<template>
  <div class="content flex">
    <div class="logo">
      <img src="../assets/logo.png" alt="">
    </div>
    <div class="form">
      <div class="input">
        <input type="text" placeholder="请输入手机号或邮箱地址" v-model="mobile">
      </div>
      <div class="input">
        <input type="password" placeholder="请输入登录密码" v-model="pasd">
      </div>
    </div>
    <div class="button flex flexAtcent flexJcent" @click="change">登录</div>
    <div class="action-row flexJcent">
      <div class="forget"><span>忘记密码</span></div>
      <div class="vertical"><span>|</span></div>
      <div class="forget"><span>注册账号</span></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      mobile: '',
      pasd: ''
    }
  },
  methods: {
    change () {
      axios({
        method: 'post',
        url: 'http://dev.518jinsha.com/' + 'home/index/index',
        headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
        data: qs.stringify({mobile: this.mobile, pasd: this.pasd})
      }).then((res) => {
        this.$layer.msg(res.data.msg)
        this.$router.push({ // 核心语句
          path: 'word', // 跳转的路径
          query: { // 路由传参时push和query搭配使用 ，作用时传递参数
            mobile: this.mobile
          }
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  background: #fff;
  width: auto;
  height: auto;
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  flex-direction: column;
  .logo {
    margin-top: 10%;
  }
  .form {
    .input {
      border-bottom: 1px solid #ddd;
      margin-top: 16px;
      &:first-child {
        margin-top: 0;
      }
    }
    input {
      display: block;
      height: 44px;
      width: 90%;
      font-size: 15px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .button {
    margin-top: 25px;
    padding: 10px;
    background-color: #0faeff;
    cursor: pointer;
    height: 25px;
    color: #fff;
    width: auto;
  }
  .action-row {
    display: flex;
    flex-direction: row;
    margin-top: 5%;
    .forget {
      padding: 0px 10px;
    }
  }
}
</style>
